<template>
  <div id="box">
    <div id="m">
      <span id="m1">矩阵:</span>
      <slot name="format"></slot>
    </div>
    <div id="total">
      <textarea id="matrix1" v-model="matrix">
    </textarea>
    </div>
    <div id="result" v-html="result">
    </div>
    <span><el-button @click="calculate">点击计算</el-button></span>
    <mr ref="tip"></mr>
  </div>
</template>

<script>
import mr from './MessageResult'
export default {
  name: 'TwoMatrixs',
  props: ['type'],
  components: {mr},
  data () {
    return {
      matrix: '',
      result: '结果'
    }
  },
  methods: {
    calculate () {
      var value = this.matrix
      var that = this
      this.axios({
        url: 'http://localhost:8080/linearAlgebra/' + this.type,
        method: 'post',
        data: {
          one: value
        }})
        .then(function (response) {
          if (response.data.length === 0) {
            that.$refs.tip.open_fail('参数不合法，请重新输入！！')
          }
          if (that.type === 'det' || that.type === 'rankMatrix') {
            that.result = response.data
          } else if (that.type === 'transposeMatrix' || that.type === 'inverseMatrix') {
            that.result = ''
            for (var i = 0; i < response.data.array.length; i++) {
              var change = response.data.array[i].toString().replaceAll(',', ' ')
              that.result += change + '<br/>'
            }
          } else if (that.type === 'eigMatrix') {
            that.result = ''
            let set = response.data
            for (let x of set) {
              that.result += x + '<br/>'
            }
          }
        }, function () {
          that.$refs.tip.open_fail('参数不合法，请重新输入！！')
        })
    }
  }
}
</script>

<style scoped>
  #box{
    margin-top: 30px;
  }
  #total{
    width: 45%;
    height: 230px;
    float: left;
  }
  #m{
    height: 40px;
  }
  #matrix1{
    /*display: inline-block;  !*转为行内块儿 *!*/
    border: 1px solid #409EFF;
    border-radius: 2px;
    margin-left: 60px;
    height: 130px;
    width: 55%;
    text-align:center;
    padding-top: 50px;
    font-size:20px;
    letter-spacing: 3px;
    color:#F56C6C;
  }

  #result{
    float: left;
    /*display: inline-block;  !*转为行内块儿 *!*/
    border: 1px solid #409EFF;
    border-radius: 2px;
    margin-left:3%;
    text-align:center;
    height: 140px;
    width: 25%;
    font-size:20px;
    letter-spacing: 3px;
    color:#F56C6C;
    padding-top: 40px;
  }
  #m1{
    margin-left: 8%;
    color: #67C23A;;
  }
  h5{
    float: left;
  }
  .el-button{
    /*float: right;*/
    margin-top: 50px;
    margin-left: 9%;
  }
</style>
